<?php
/**
 * 首页内容区域
 */

if (!defined('ROOT_PATH')) {
    die('直接访问被禁止');
}

// 设置页面标题
set_page_title();

// 页面特定样式
$page_styles = <<<HTML
<style>
    /* 只保留页面特有样式，其他通用样式移到styles.css中 */
    .navbar-brand i {
        font-size: 2rem;
        margin-right: 10px;
        color: #FF6B6B;
    }
    
    /* 菜单子项样式 */
    .age-group-item {
        position: relative;
        padding-left: 25px;
        margin-bottom: 8px;
        opacity: 0;
        animation: fadeInRight 0.5s forwards;
        animation-delay: calc(var(--item-index) * 0.1s);
    }
    
    @keyframes fadeInRight {
        from {
            opacity: 0;
            transform: translateX(-20px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    .age-group-icon {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        color: #4a90e2;
        font-size: 1.1rem;
    }
    
    .dropdown-menu .dropdown-item i {
        margin-right: 8px;
        transition: transform 0.3s ease;
    }
    
    .dropdown-menu .dropdown-item:hover i {
        transform: rotate(10deg) scale(1.2);
    }
</style>
HTML;
?>

<!-- 主内容区 -->
<div class="container">
    <!-- 欢迎区 -->
    <div class="welcome-banner mb-4">
        <div class="content text-center">
            <h1>欢迎来到 KidsMind!</h1>
            <p class="lead">为3-8岁儿童打造的思维训练平台</p>
            <div class="mt-4">
                <a href="#age-groups" class="btn btn-lg btn-light">开始探索</a>
            </div>
        </div>
    </div>

    <!-- 年龄段选择 -->
    <div id="age-groups" class="content-container">
        <h2 class="section-title">按年龄选择专区</h2>
        
        <div class="card-row">
            <div class="card-column">
                <div class="age-card age-card-3-4">
                    <div class="card-body text-center">
                        <h3 class="card-title">3-4岁</h3>
                        <p class="card-text">形状、颜色认知和基础观察力训练</p>
                        <a href="<?php echo page_url('age-3-4'); ?>" class="btn btn-primary">进入专区</a>
                    </div>
                </div>
            </div>
            
            <div class="card-column">
                <div class="age-card age-card-5-6">
                    <div class="card-body text-center">
                        <h3 class="card-title">5-6岁</h3>
                        <p class="card-text">逻辑推理和基础数学思维训练</p>
                        <a href="<?php echo page_url('age-5-6'); ?>" class="btn btn-primary">进入专区</a>
                    </div>
                </div>
            </div>
            
            <div class="card-column">
                <div class="age-card age-card-7-8">
                    <div class="card-body text-center">
                        <h3 class="card-title">7-8岁</h3>
                        <p class="card-text">复杂数学思维和高级推理能力训练</p>
                        <a href="<?php echo page_url('age-7-8'); ?>" class="btn btn-primary">进入专区</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 题目类型展示 -->
    <div class="content-container">
        <h2 class="section-title">丰富多样的题目类型</h2>
        
        <div class="card-row">
            <div class="card-column">
                <div class="question-type-card">
                    <div class="card-body text-center">
                        <img src="<?php echo asset_url('images/animation-question.png'); ?>" alt="动画选择题" class="question-type-img">
                        <h4 class="card-title mt-3">动画选择题</h4>
                        <p class="card-text">生动有趣的动画呈现，点击选择正确答案</p>
                    </div>
                </div>
            </div>
            
            <div class="card-column">
                <div class="question-type-card">
                    <div class="card-body text-center">
                        <img src="<?php echo asset_url('images/puzzle.png'); ?>" alt="拼图题" class="question-type-img">
                        <h4 class="card-title mt-3">拼图题</h4>
                        <p class="card-text">拖动图片碎片，锻炼空间想象与手眼协调</p>
                    </div>
                </div>
            </div>
            
            <div class="card-column">
                <div class="question-type-card">
                    <div class="card-body text-center">
                        <img src="<?php echo asset_url('images/memory-cards.png'); ?>" alt="记忆卡牌" class="question-type-img">
                        <h4 class="card-title mt-3">记忆卡牌</h4>
                        <p class="card-text">翻找匹配的卡牌，训练记忆力与注意力</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 会员权益 -->
    <div class="content-container">
        <h2 class="section-title">会员权益</h2>
        
        <div class="card-row">
            <div class="card-column">
                <div class="membership-card basic-membership">
                    <div class="card-header text-center">
                        <h3>基础会员</h3>
                        <p class="price">免费</p>
                    </div>
                    <div class="card-body">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">基础题目体验</li>
                            <li class="list-group-item">有限答题次数</li>
                            <li class="list-group-item">简单记录统计</li>
                        </ul>
                    </div>
                    <div class="card-footer text-center">
                        <a href="<?php echo page_url('register'); ?>" class="btn btn-outline-primary">立即注册</a>
                    </div>
                </div>
            </div>
            
            <div class="card-column">
                <div class="membership-card gold-membership">
                    <div class="card-header text-center">
                        <h3>黄金会员</h3>
                        <p class="price">¥99/月</p>
                    </div>
                    <div class="card-body">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">无限答题次数</li>
                            <li class="list-group-item">解锁全部专区题目</li>
                            <li class="list-group-item">参与专属活动</li>
                            <li class="list-group-item">获取限量奖励</li>
                        </ul>
                    </div>
                    <div class="card-footer text-center">
                        <a href="<?php echo page_url('membership'); ?>" class="btn btn-primary">立即开通</a>
                    </div>
                </div>
            </div>
            
            <div class="card-column">
                <div class="membership-card diamond-membership">
                    <div class="card-header text-center">
                        <h3>钻石会员</h3>
                        <p class="price">¥199/月</p>
                    </div>
                    <div class="card-body">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">黄金会员所有权益</li>
                            <li class="list-group-item">个性化训练计划定制</li>
                            <li class="list-group-item">优先参与线下活动</li>
                            <li class="list-group-item">专属客服支持</li>
                        </ul>
                    </div>
                    <div class="card-footer text-center">
                        <a href="<?php echo page_url('membership'); ?>" class="btn btn-primary">立即开通</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> 